<template>
	<div class="pageBox">
		<div class="user_pc">
			<div class="overFlowPage">
				<!-- 左侧登录框 -->
				<div class="warper_left">
					<div class="warper_left_centent01">
						<font class="warper_left_centent01_font1" style="vertical-align: inherit;">
							{{$t('profile.Welcome')}}
						</font> <br>
						<font class="warper_left_centent01_font2" style="vertical-align: inherit;font-size: 16px;">
							{{this.$store.state.userinfo.email}}</font>
						<div class="warper_left_centent01_Edit" @click="btn( 4 ,'/accountSettings')"
							style="vertical-align: inherit;"><img style="  vertical-align:middle;    "
								src="../assets/images/peen01.png" alt="">
							<font style="padding-left:10px;font-size:16px">{{$t('profile.edit')}} </font>
						</div>
					</div>

					<div :class="{isLeftBorder: 0 === colorIsShow | '/profile'  === routerName}"
						class="isLeftBorderWhite" @click="btn(0 , '/profile')">
						<a href="javaScript:;">
							<div class="overFlow_liBox_20-zL , overFlow_01 " :class="{orangeColor: 0 === colorIsShow}">
								{{$t('profile.MyAccounts')}}
							</div>
						</a>
					</div>

					<div :class="{isLeftBorder: 1 === colorIsShow | '/application'  === routerName}"
						class="isLeftBorderWhite" @click="btn(1 , '/application')">
						<a href="javaScript:;">
							<div class="overFlow_liBox_20-zL , overFlow_01" :class="{orangeColor: 1 === colorIsShow}">
								{{$t('profile.Application')}}: {{this.$store.state.shopCatNum}}
							</div>
						</a>
					</div>

					<div :class="{isLeftBorder: 2 === colorIsShow | '/balance'  === routerName | '/rewardPoints' === routerName}"
						class="isLeftBorderWhite" @click="btn(2  , '/balance')">
						<a href="javaScript:;">
							<div class="overFlow_liBox_20-zL , overFlow_01" :class="{orangeColor: 2 === colorIsShow}">
								{{$t('profile.Balance')}}: ￥ {{userinfo.cashBackBalance}}
							</div>
						</a>
					</div>

					<div :class="{isLeftBorder: 3 === colorIsShow | '/accountSettings'  === routerName}"
						class="isLeftBorderWhite" @click="btn(3 , '/accountSettings')">
						<a href="javaScript:;">
							<div class="overFlow_liBox_20-zL , overFlow_01" :class="{orangeColor: 3 === colorIsShow}">
								{{$t('profile.Account')}}
							</div>
						</a>
					</div>

					<div :class="{isLeftBorder: 4 === colorIsShow | '/referral'  === routerName}"
						class="isLeftBorderWhite" @click="btn(4 , '/referral')">
						<a href="javaScript:;">
							<div class="overFlow_liBox_20-zL , overFlow_01" :class="{orangeColor: 4 === colorIsShow}">
								{{$t('profile.Friend')}}
							</div>
						</a>
					</div>

					<div :class="{isLeftBorder: 5 === colorIsShow | '/login'  === routerName}" class="isLeftBorderWhite"
						@click="btn(5 , '/login')">
						<a href="javaScript:;">
							<div class="overFlow_liBox_20-zL , overFlow_01" :class="{orangeColor: 5 === colorIsShow}">
								{{$t('profile.Out')}}
							</div>
						</a>
					</div>

					<div :class="{isLeftBorder: 6 === colorIsShow | '/help'  === routerName}" class="isLeftBorderWhite"
						@click="btn(6 , '/help')">
						<a href="javaScript:;">
							<div class="overFlow_liBox_20-zL , overFlow_01" :class="{orangeColor: 6 === colorIsShow}">
								{{$t('profile.help')}}
							</div>
						</a>
					</div>

				</div>


				<div class="warper_right">
					<div class="warper_right_top">
						<router-view></router-view>
					</div>
					<div class="warper_right_bottom"></div>
				</div>
			</div>
		</div>
		<!-- 导致多次渲染 -->
		<!-- <div class="user_iphone">
			<router-view></router-view>
		</div> -->
		<my-footer style="margin-top:0px"></my-footer>
	</div>
</template>

<script>
	import myFooter from '../components/my-footer/my-footer.vue'
	export default {
		components: {
			myFooter
		},
		name: 'user',
		computed: {
			userinfo() {
				return this.$store.state.userinfo
			}
		},
		data() {
			return {
				isLeftBorder: 'isLeftBorder',
				colorIsShow: 0,
				routerName: '/profile'
			}
		},
		mounted() {
			this.routerName = this.$route.path
			this.colorIsShow = 1000
			// console.log(this.$store.state.userinfo.email)
		},
		methods: {
			btn(num, path) {
				this.colorIsShow = num
				this.$router.push(path)
			}
		},
		watch: {
			$route(to, from) {
				console.log(to.path);
				this.routerName = to.path
				this.colorIsShow = 1000
			}
		}

	}
</script>

<style scoped lang='scss'>
	@media only screen and (min-width: 900px) {
		.user_iphone {
			display: none;
		}
	}

	.pageBox {
		font-size: 14px;
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: rgb(245, 245, 245);

		overflow: auto;
		margin-bottom: 20px;
	}

	.overFlowPage {
		display: flex;
		margin: 20px;
		/* background-color: red; */
		/* height: 700px; */
		/* margin-bottom: 120px; */
		@media screen and (max-width: 900px) {
			margin: 0;
		}
	}

	.warper_left {
		width: 400px;
		height: 660px;
		background-color: white;
		font-size: 16px;

		@media screen and (max-width: 900px) {
			display: none;
		}
	}

	.warper_left_centent01 {
		width: 400px;
		height: 92.15px;
		/* padding-left: 70px; */
		box-sizing: border-box;
		/* background-color: red; */
		text-align: center;
	
	}

	.warper_left_centent01_font1 {
		margin-top: 20px;
		display: inline-block;
		font-size: 20px;
		line-height: 30px;
		color: #ffaf52;
			text-align: center;
	}

	.warper_left_centent01_Edit {
		color: #ff5900;
		cursor: pointer;
	}

	.overFlow_liBox_20-zL {
		padding: 22px 0 22px 40px;
		margin: 0 32px;
		border-top: 1px solid #efefef !important;
		display: block;
	}

	.overFlow_01 {
		text-align: left;
		font-size: 16px;
	}

	.warper_left a:hover {
		color: #ff5900;
	}

	.isLeftBorderWhite {
		border-left: 10px solid white;
	}

	.isLeftBorder {
		border-left: 10px solid #ffaf52;

	}

	.warper_right {
		flex-grow: 1;
		
		@media screen and (max-width: 900px) {
			width: 100%;
		} 
	}

	.orangeColor {
		color: #ff5900;
	}
</style>
